<template lang="">
<view>
  <!-- 1搜索框 -->
 <view class="index-search">
      <u-search
        placeholder="搜索"
        :show-action="false"
        shape="square"
        bg-color="#fff"
      >
      </u-search>
</view>
<!-- 2轮播图 -->
<view>
   <u-swiper
      :list="swiperList"
      name="image_src"
      height="340"
    >
    </u-swiper>
</view>

<!-- 3导航栏 -->
<view class="nav u-flex">
<navigator  v-for="item in navList" :key="item.name" class="u-flex-1 u-p-15">
   <u-image
          mode="widthFix"
          :src="item.image_src"
        ></u-image>
</navigator>
</view>

<!--4 楼层 -->
<view  class="floor" >
  <view  v-for="item1 in floorList" :key="item1.floor_title.name" class="floor-group" u-m-t-10>
    <!-- 标题 -->
    <view  class="floor-group-title">
      <u-image :src="item1.floor_title.image_src" mode="widthFix"></u-image>
    </view>
    <!-- 内容 -->
    <view class="floor-group-content">
      <navigator v-for="item2 in item1.product_list"  :key="item2.name">
             <u-image :src="item2.image_src"              mode="scaleToFill"
             width="100%"
             height="100%"></u-image>
      </navigator>
    </view>
  </view>
</view>

</view>

</template>
<script>
export default {
  data(){
    return{
          swiperList:[],//轮播图
          navList:[],//导航栏
          floorList:[]//楼层数据
    }
  },
  onLoad(){
    this.swiperFn()
    this.navFn()
    this.getFloor()
  },
  methods:{ 
    async swiperFn(){
      this.swiperList = await this.$u.http.get("/home/swiperdata")
    },
    async navFn(){
        this.navList = await this.$u.http.get("/home/catitems")
    },
    async getFloor(){
        this.floorList = await this.$u.http.get("/home/floordata")
    }
  }

};
</script>
<style lang="scss">
.index-search {
  // background-color:$theme-color;
  background-color:#eb4450;
  padding: 10rpx 25rpx;
}

.floor{
  .floor-group-content{
    overflow: hidden;
    navigator{
      float: left;
      // background-color: pink;
      
    }
    // 第一个导航栏标签
    navigator:first-child{
          width: 232rpx;
          height: 386rpx;     
    }
    // 后四个导航栏标签
    navigator:nth-last-child(-n+4){
          width: 233rpx;
          height: 188rpx;
          margin-left: 10rpx;     
    }
   /* 后2个导航标签 */
    navigator:nth-last-child(-n + 2) {
      margin-top: 10rpx;
    }
  }
}
</style>
